<template>
  <div class="app-container">
    <el-dialog :title="title" :visible.sync="visible" width="500px" v-if="visible"  append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" >
        <el-row>
          <el-col :span="24">
            <el-form-item label="产品分类" label-width="100px" prop="typeId">
              <el-select v-model="form.typeId" placeholder="请选择" clearable size="small" >
                <el-option v-for="item in typePro" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" >确认配置</el-button>
        <el-button @click="cancel" >取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Dialog",
  data() {
    return {
      // 弹出层标题
      title: "批量配置产品分类",
      // 是否显示弹出层
      visible: false,
      typePro:[],
      // 表单参数
      form: {
        typeId:null
      },
      // 表单校验
      rules: {
        typeId: [
          { required: true, message: "请选择产品分类", trigger: ["blur", "change"] }
         ]
      }
    };
  },
  created() {
  
  },
  methods: {

    /** 打开聚客推旅游产品弹框 */
    open(data) {
      this.visible = true
      this.typePro = data
            
    },
    // 取消按钮
    cancel() {
       this.visible = false;
       this.$refs['form'].resetFields();
      
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          // 打开遮罩层
            const loading = this.$loading({lock: true, text: '正在处理中数据，请稍后...',spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' }); 
            setTimeout(() => {
                loading.close();
                this.$emit('refresh', this.form.typeId);
                this.cancel()
            }, 1000);
          
    
        }
      });
    },

  }
};
</script>

<style scoped>
.dialog-footer{
  text-align: center;
}
</style>
